<template>
    <div>
      <Card title="新增模板属性"
            :bordered="false"
            dis-hover
            class="ivu-mt qw-form-card">
        <div style="width:60%;margin: 0 auto;">
          <Form :model="formLeft"
                label-position="left"
                :label-width="100">
            <FormItem label="属性类型">
							<Select v-model="model1" disabled style="width:200px">
									<Option v-for="item in retData" :value="item.attributeType" :key="item.attributeType">{{item.attributeZn}}</Option>
							</Select>
            </FormItem>
						<FormItem label="属性名称">
              <Input v-model="formLeft.input1" show-word-limit maxlength="30" @on-blur="handleInputBlur"></Input>
            </FormItem>
						<FormItem label="属性别名">
              <Input v-model="formLeft.input4" show-word-limit maxlength="30"></Input>
            </FormItem>
            <FormItem label="">
              <Button type="primary" :loading="sLoading"  @click="handleSubmit('formData')">提交</Button>
              <Button style="margin-left: 8px"  @click="cancel">取消</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
</template>
<script>
import forms from '@/mixins/dynamicFormAdd'; // 混入通用代码
import qwSelectTree from '@/components/common/formItem/qwSelectTree'; // selectTree组件
import qwInput from '@/components/common/formItem/qwInput'; // input组件
import qwSelect from '@/components/common/formItem/qwSelect'; // select组件
import qwDatePicker from '@/components/common/formItem/qwDatePicker'; // 时间组件
import qwUpload from '@/components/common/formItem/qwUpload'; // upload组件
import qwCascader from '@/components/common/formItem/qwCascader'; // 级联组件
import qwRadio from '@/components/common/formItem/qwRadio'; // 单选组件
import qwCheckbox from '@/components/common/formItem/qwCheckbox'; // 多选组件
import qwQuill from '@/components/common/formItem/qwQuill'; // 多选组件
import { ApiRequest } from '@api/basePage';
export default {
  mixins: [forms],
  components: {
    qwSelectTree,
    qwInput,
    qwDatePicker,
    qwSelect,
    qwUpload,
    qwCascader,
    qwRadio,
    qwCheckbox,
    qwQuill
  },
  data () {
    return {
      retData: [],
      model1: '01',
      formLeft: {
        input1: '',
        input4: '',
        desc: ''
      }
    };
  },
  created () {
    this.getAttributeTypeList();
  },
  mounted () {},
  methods: {
    handleInputBlur (event) {
      if (this.formLeft.input1 === '') {
        this.$Message.error('属性名称不能为空！');
        return;
      }

      let data = {
        attrName: this.formLeft.input1,
        attrUuid: "''"
      };

      // 开始请求会员信息
      ApiRequest(
        '/sysback/template/producttemplateattr/checkAttrName',
        'post',
        data,
        true
      ).then(res => {
        if (res.retStatus === '1') {
          if (res.retData === 'true') {
          } else if (res.retData === 'false') {
            this.$Message.error('分类名称已存在，请重新输入！');
            this.formLeft.input1 = '';
          } else {
          }
        } else {
        }
      });
    },
    getAttributeTypeList () {
      ApiRequest(
        '/sysback/template/producttemplateattr/getAttributeTypeList',
        'post'
      ).then(res => {
        this.retData = res.retData;
      });
    },
    cancel () {
      this.$router.go(-1);
    },
    // 提交
    handleSubmit (name) {
      let data = {};
      if (this.model1 === '') {
        this.$Message.error('请选择属性');
        return;
      }
      if (this.model1 === '01') {
        this.formLeft.input1 = this.formLeft.input1.trim();
        this.formLeft.input4 = this.formLeft.input4.trim();
        if (this.formLeft.input1 === '') {
          this.$Message.error('请输入属性名称');
          return;
        }
        if (this.formLeft.input4 === '') {
          this.$Message.error('请输入属性别名');
          return;
        }
        data = {
          attributeName: this.formLeft.input1,
          aliasAttrName: this.formLeft.input4,
          engName: '',
          unit: '',
          attributeType: '01'
          // type: this.formData.type
        };
      }
      if (this.sLoading) {
        return false;
      }
      this.sLoading = true;
      // 开始请求会员信息
      ApiRequest(
        this.requestApi.addDataInfo.url,
        this.requestApi.addDataInfo.type,
        data
      ).then(res => {
        if (res.retStatus === '1') {
          this.$Message.success('成功!');

          this.$router.go(-1);
        }
        this.sLoading = false;
      });
    },
    // 获取初始配置信息
    getConfigData () {
      this.pagePath = this.$route.path;
      let dynamicData = require('./configjs/attributeAdd').default;
      this.requestApi = dynamicData.requestApi; // 页面所需接口集合
      this.$set(this.$data, 'dynamicData', dynamicData);

      // copy 一份数据 方便清空表单数据
      let copyFormData = JSON.parse(JSON.stringify(this.dynamicData.formData));
      let copyFormDataRules = JSON.parse(
        JSON.stringify(this.dynamicData.formDataRules)
      );
      // 传给子组件的数据
      this.copyFormData = copyFormData;
      this.copyFormDataRules = copyFormDataRules;

      // 动态添加formData 提交数据内容
      copyFormData.forEach(item => {
        const obj = item.data;
        let name = '';
        let val = '';
        if (obj.type === 'inputRange' || obj.type === 'inputNumberRange') {
          obj.valueArr.forEach(item => {
            name = item.name;
            val = item.value;
            this.$set(this.formData, name, val);
          });
        } else {
          name = obj.name;
          val = obj.value;
          this.$set(this.formData, name, val);
        }
      });
    }
  }
};
</script>
